<template>
	<view class="view-main">
		<view class="header">
			<my-tab :tabData="tabData" :tabCurrent="tabCurrent" @handleClick="handleTabClick"></my-tab>
		</view>

		<!-- <view class="navbar" v-if="tabCurrent===1">
			<view class="navbar-main">
				<template v-for="(item,index) in tagDatas">
					<view class="tag-view" :key="index">
						<u-tag :text="item" class="tag-part" @click="tagChange(item,index)" type="primary"
							:mode="tagCurrent===index?'dark':'plain'" />
					</view>
				</template>
			</view>
		</view> -->
		<view class="main">
			<uni-list v-if="tableDatas.datas.length">
				<uni-list-item :title="'异常任务：'+(row.PreparePlanName||'')" :note="handleNote(row)"
					:class="tabCurrent===0?'tab0':'tab1'" :rightText="handleResolutionStatus(row)" clickable
					@click="handleClick(row)" v-for="(row,rowIndex) in tableDatas.datas" :key="rowIndex"
					:showArrow="true"></uni-list-item>
			</uni-list>
			<u-empty text="暂无数据" mode="list" v-else></u-empty>
		</view>
	</view>
</template>

<script>
	import myTab from '@/components/myTabs/index.vue'
	export default {
		components: {
			myTab
		},
		computed: {
			listData() {
				return this.tableDatas.columns.filter(val => this.tableDatas.listProp.includes(val.prop))
			},
		},
		data() {
			return {
				tabData: ['待处理', '已处理'],
				tabCurrent: 0,
				tagDatas: ['本月', '上月'],
				tagCurrent: 0,
				tableDatas: {
					ID: 24401,
					datas: [],
					columns: [],
					listProp: ['StartDate', 'SourceOrderNo', 'MaterialName'],
					condition: {},
					selectRow: null,
				},
				dialogInput: null,
				dialogVisable: false,
			}
		},
		onLoad() {
			this.getApsData()
		},
		onShow() {
			this.getApsData(this.tabCurrent)
		},
		methods: {
			handleTabClick(index) {
				this.tabCurrent = index
				this.getApsData(this.tabCurrent)
			},
			handleResolutionStatus(row) {
				return this.tabCurrent === 0 ?
					row.ResolutionStatus ?
					'已处理' :
					row.ResolutionStartDate ?
					'处理中' :
					'待处理' :
					row.EndDate ?
					'' :
					'未结束';
			},
			handleClick(row) {
				const permission = this.$store.getters.userInfo.RoleMap?.some(val => val.RoleID === 'E01Admin' || val
					.RoleID ===
					'R2309260006') // 管理员和车间主管角色
				if (!permission) return
				this.tableDatas.selectRow = row
				let url = '/pages/Isgo/handleAbnormal/handleAbnormal1'
				let params = {
					ID: row.ID, // 主键ID
					ResolutionStartDate: row.ResolutionStartDate, // 处理开始时间
					AbnormalReasonID: row.AbnormalReasonID, // 异常原因ID
					AbnormalDescription: row.AbnormalDescription, // 异常描述
					SourceOrderNo: row.SourceOrderNo, // po单号 用作图片保存
					dicID: 24400
				}
				this.$u.route({
					url,
					params
				})

			},
			async dialogConfirm() {
				const rowData = JSON.parse(JSON.stringify(this.tableDatas.selectRow))
				rowData.ResolutionDescription = this.dialogInput
				// rowData.SubmitType = 7
				rowData.ResolutionStaff = this.$store.getters.userInfo.Account
				rowData.ResolutionDate = rowData.EndDate || this.$u.timeFormat(this.timestamp, 'yyyy-mm-dd hh-MM-ss')
				rowData.ResolutionStatus = 1
				const res = await this.$request.post({
					url: '/APSAPI/SaveData',
					data: [rowData]
				}).catch(err => err)
				if (!res) return this.$refs.popupRef.close()
				const {
					msg
				} = res
				uni.showToast({
					title: msg,
					icon: 'success'
				})
				// this.$refs.popupRef?.close()
				this.dialogVisable = false
				this.getApsData(0)
			},
			async dialogClose() {
				const rowData = JSON.parse(JSON.stringify(this.tableDatas.selectRow))
				const popupRef = this.$refs.popupRef
				if (!this.dialogInput) return uni.showToast({
					title: '请填写未处理原因',
					icon: 'error'
				})
				rowData.ResolutionDescription = this.dialogInput
				rowData.ResolutionStaff = this.$store.getters.userInfo.Account
				rowData.ResolutionDate = rowData.EndDate || this.$u.timeFormat(this.timestamp, 'yyyy-mm-dd hh-MM-ss')
				rowData.ResolutionStatus = 1
				const res = await this.$request.post({
					url: '/APSAPI/SaveData',
					data: [rowData]
				}).catch(err => err)
				if (!res) return this.dialogVisable = false
				const {
					msg
				} = res
				uni.showToast({
					title: msg,
					icon: 'success'
				})
				this.dialogVisable = false
				this.getApsData()
			},
			// 获取数据
			async getApsData(remark = 0) {
				const condition = {
					dicID: this.tableDatas.ID,
					ProductionStatus: 89,
					ResolutionStatus: remark === 0 ? 0 : 1
				}
				if (remark === 1) {
					// 更精确的计算方法（考虑月份天数差异）
					const today = new Date();
					const thirtyDaysAgo = new Date(today);
					thirtyDaysAgo.setDate(today.getDate() - 30);
					const formattedToday = this.$u.timeFormat(today, 'yyyy-mm-dd');
					const formattedDate = this.$u.timeFormat(thirtyDaysAgo, 'yyyy-mm-dd');
					condition.ResolutionDate = [formattedDate, formattedToday]
				}
				const res = await this.$request.post({
					url: '/APSAPI/APSData',
					data: condition
				}).catch(err => err)
				if (!res) return
				const {
					result,
					msg,
					data,
					Columns
				} = res
				data.forEach(val => val.showDetails = true)
				this.$set(this.tableDatas, 'datas', data)
				this.$set(this.tableDatas, 'columns', Columns[0])
			},
			handleNote(row) {
				return this.tabCurrent === 0 ? `PO单号：${row.SourceOrderNo||''}
				组件名称：${row.MaterialName||''}
				异常类型：${row.SmallType||''}
				提报人员：${row.Name||''}
				提报时间：${row.StartDate||''}
				异常描述：${row.AbnormalDescription||'无'}
				` :
					`PO单号：${row.SourceOrderNo||''}
				组件名称：${row.MaterialName||''}
				异常类型：${row.SmallType||''}
				异常描述：${row.AbnormalDescription||'无'}
				提报人员：${row.Name||''}
				提报时间：${row.StartDate||''}
				处理时间：${row.ResolutionDate||''}
				异常结束：${row.EndDate||'未结束'}
				`
			},
			tagChange(item, index) {
				this.tagCurrent = index
				// this.$u.time
			},
		}
	}
</script>

<style scoped lang="scss">
	.view-main {
		// display: flex;
		// flex-direction: column;
		// height: calc(100vh - 88rpx);
		// justify-content: flex-start;
		// height: 100%;

		.header {
			height: 80rpx;
			width: 100%;
			position: relative;
		}

		.navbar {
			// position: fixed
			height: 60rpx;
			width: 100%;

			.navbar-main {
				position: fixed;
				height: 60rpx;
				width: 100%;
				// position: fixed;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
		}

		.main {
			// margin-top: 88rpx;
			flex-grow: 1;
		}
	}


	::v-deep .uni-list-item__extra-text {
		>span {
			color: $uni-color-primary !important;
		}
	}

	.list-part {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		padding: 10rpx;
		background-color: $uni-bg-color-grey;

		.list-item {
			padding: 10rpx 15rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			margin-bottom: 10rpx;
			border-radius: 5rpx;

			.list-row-1 {
				display: flex;
				justify-content: space-around;
				font-size: 28rpx;

				.left {
					flex-grow: 1;
					min-width: 50%;
					text-wrap: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.right {
					display: flex;
					flex-wrap: nowrap;
					justify-content: flex-end;
					min-width: 35%;
					align-items: center;

					.mini-btn {
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 0;
						margin-right: 0;
						font-size: smaller;
					}

					.minimize {
						margin: 0 15rpx 0 20rpx;
						border-radius: 50%;
						background-color: #ff0000;
						color: #fff;
						font-weight: bold;
						width: 40rpx !important;
						height: 40rpx !important;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0;
					}

				}

			}

			.list-row-2 {
				font-size: 20rpx;
			}

			.list-row-3 {
				background-color: $uni-bg-color-grey;
				padding: 10rpx 8rpx;
				border-radius: 20rpx;

				.list {
					display: flex;
					height: 40rpx;

					.label {
						max-width: 30%;
						min-width: 20%;
						height: 100%;
						line-height: 50rpx;
						color: $uni-text-color-placeholder;
					}

					.text-part {
						flex-grow: 1;
						line-height: 40rpx;
						color: #000;
						text-indent: 5rpx;
						text-wrap: wrap;
					}
				}
			}

		}
	}

	.dialog-main {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		padding: 50rpx 40rpx 20rpx;

		.dialog-btn {
			display: flex;
			flex-direction: row;

		}
	}

	.tab0 {
		::v-deep .uni-list-item__content-title {
			background: linear-gradient(to right, rgb(255, 207, 15), #fff) !important;
		}


	}

	.tab1 {
		::v-deep .uni-list-item__content-title {
			background: linear-gradient(to right, rgb(85, 255, 7), #fff) !important;
		}

	}

	::v-deep .uni-list-item__content-title {
		font-size: 30rpx;
		font-weight: bold;
	}

	::v-deep .uni-list-item__content-note {
		font-size: 28rpx;
	}
</style>